<template>
    <div>
        <h1>用户</h1>
        <!--卡片区-->
        <el-card class="box-card">
            <!-- gutter="20" 列与列之间的间隔
      :span="8"  具体列的所占有的宽度（24为整个屏幕宽度）-->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input v-model="queryInfo.query" :clearable='true' @clear='getUserList' placeholder="请输入内容">
                        <template #append>
                            <Search /> <el-button @click="search" :icon="Search"> </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="switchdialog1">添加用户</el-button>
                    <!-- 对话框  -->
                    <el-dialog title="添加用户信息" v-model="addUserDialogVisible" width="40%">
                        <el-form ref="addFormRef" :model="addForm" label-width="80px">
                            <el-form-item label="电话" prop="mobile">
                                <el-input v-model="addForm.mobile"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="addForm.password"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="addForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄" prop="age">
                                <el-input v-model="addForm.age"></el-input>
                            </el-form-item>
                            <el-form-item label="身高" prop="height">
                                <el-input v-model="addForm.height"></el-input>
                            </el-form-item>
                            <el-form-item label="星座">
                                <el-select placeholder="请选择星座" v-model="addForm.constellation">
                                    <el-option v-for="item in constellations" :label="item.name" :value="item.name"
                                        :key="item.code">
                                    </el-option>
                                </el-select>
                                <!-- <el-input v-model="addForm.constellation"></el-input> -->
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="addUserDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addUserDialogEnter">确
                                    定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </el-col>
            </el-row>
            <!-- 用户 -->
            <el-table :data="userlist">
                <el-table-column label="序号" type="index" width="80"></el-table-column>
                <el-table-column label="用户名手机" prop="mobile" width="160"></el-table-column>
                <el-table-column label="密码" prop="password" width="280"></el-table-column>
                <el-table-column label="姓名" prop="name" width="100"></el-table-column>
                <el-table-column label="年龄" prop="age" width="100"></el-table-column>
                <el-table-column label="身高" prop="height" width="100"></el-table-column>
                <el-table-column label="星座" prop="constellation" width="100"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type='primary' @click="userUpdate(scope.row)">修改</el-button>
                        <el-button type='danger' @click="deleteUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 对话框2  -->
            <el-dialog title="修改用户信息" v-model="addUserDialogVisible2" width="40%" @close="updateFormRefclose">
                <el-form ref="updateFormRef" :model="addForm2" label-width="80px">
                    <el-form-item label="唯一id" prop="mobile">
                        <el-input v-model="addForm2._id" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="mobile">
                        <el-input v-model="addForm2.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="addForm2.password"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addForm2.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="addForm2.age"></el-input>
                    </el-form-item>
                    <el-form-item label="身高" prop="height">
                        <el-input v-model="addForm2.height"></el-input>
                    </el-form-item>
                    <el-form-item label="星座">
                        <el-select placeholder="请选择星座" v-model="addForm2.constellation">
                            <el-option v-for="item in constellations" :label="item.name" :value="item.name"
                                :key="item.code">
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="addForm2.constellation"></el-input> -->
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addUserDialogVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="uptaeUserDialogEnter">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
            </el-pagination>
        </el-card>
    </div>
</template>
  
<script setup>

import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue"
import { getUserInfoList2, updateuser, getUsersearch2, addUser, delUser } from '@/api/sys.js'
import { ref, onMounted } from 'vue'

// 获取员工列表  + 分页  
const queryInfo = ref(
    {
        query: "",
        pagenum: 1,
        pagesize: 5,
        id: "",
        total: 10
    }
);
const userlist = ref([])

const getUserList = () => {
    getUserInfoList2(queryInfo.value).then((res) => {
        userlist.value = res.data
        queryInfo.value.total = res.total //总数
    })
}
onMounted(() => {
    getUserList()
})

// 指定页数
const handleSizeChange = (e) => {
    queryInfo.value.pagesize = e
    getUserList()
}
const handleCurrentChange = (e) => {
    queryInfo.value.pagenum = e
    getUserList()
}

// 查找
const search = () => {
    if (queryInfo.value.query != "") {
        getUsersearch2(queryInfo.value.query).then((res) => {
            userlist.value = res.data
        })
    }
}

const switchdialog1 = () => {// dialog 状态框
    addUserDialogVisible.value = true
}
// 添加用户逻辑
const addUserDialogVisible = ref(false); //模态框触发布尔值
const constellations = ref([
    // 白羊座、金牛座、双子座、巨蟹座、狮子座、处女座、天秤座、天蝎座、射手座、摩羯座、水瓶座、双鱼座。
    { name: "白羊座", code: 1 },
    { name: "金牛座", code: 2 },
    { name: "双子座", code: 3 },
    { name: "巨蟹座", code: 4 },
    { name: "狮子座", code: 5 },
    { name: "处女座", code: 6 },
    { name: "天秤座", code: 7 },
    { name: "天蝎座", code: 8 },
    { name: "射手座", code: 9 },
    { name: "摩羯座", code: 10 },
    { name: "水瓶座", code: 11 },
    { name: "双鱼座", code: 12 }
])
var addForm = ref({
    password: "",
    mobile: "",
    age: '',
    height: 175,
    name: '',
    constellation: ''
});

var addFormRules = ref({
    //添加用户 模态框form表单规则
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 15, message: "长度在 3 到 5 个字符", trigger: "blur" },
    ],

    mobile: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确手机号",
            trigger: "blur",
        },
    ],
});

const addFormRef = ref(null); //默认null mounted之后变为组件的引用
const addUserDialogEnter = () => {
    addFormRef.value.validate((valid) => {
        if (!valid) {
            ElMessage({
                message: "Warning, this is form eror",
                type: "warning",
            });
        } else {
            addUser(addForm.value).then((res) => {
                console.log("res添加用户的结果", res);
                if (res.info == "success") {
                    addUserDialogVisible.value = false; //关闭模态框
                    getUserList()//重新请求
                    addForm.value.mobile = ""; //表单置为空
                    addForm.value.password = "";
                }
            });
        }
    });
};

// 添加用户逻辑
// 修改 
const addUserDialogVisible2 = ref(false)
const addForm2 = ref({
    password: "",
    mobile: "",
    age: '',
    height: 175,
    name: '',
    constellation: ''
})

const updateFormRefclose = () => { }
const userUpdate = (data) => {
    addForm2.value.mobile = data.mobile
    addForm2.value.password = data.password
    addForm2.value._id = data._id
    addForm2.value.name = data.name
    addForm2.value.age = data.age
    addForm2.value.height = data.height
    addForm2.value.constellation = data.constellation
    addUserDialogVisible2.value = true
}
const uptaeUserDialogEnter = () => {
    updateuser(addForm2.value).then((res) => {
        console.log("00000000000000", res);
        getUserList()
        addUserDialogVisible2.value = false
    })
}



// 删除用户
const deleteUser = (data) => {
    console.log(data._id);
    ElMessageBox.confirm("是否删除该用户", 'Warning', {
        confirmButtonText: "取消",
        confirmButtonText: "确定"
    }).then(() => {
        delUser(data._id).then((res) => {
            getUserList();
        })
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "delete canceled"
        })
    })
}
</script>
  
<style lang="scss" scoped>
.box-card {
    margin-top: 30px;
    box-shadow: 0 1px 1px #353333;
}
</style>

